import React, {PureComponent} from 'react'
import {View, Text, StyleSheet, Image, TouchableOpacity, Dimensions} from 'react-native'
import {CustomAnimation} from "react-native-tabbar-animated";
import {Heading3} from '../../common/widget/Text'

type Props = {
    onPress: Function,
    icon: any,
    title: string,
}

class HomeMenuItem extends PureComponent<Props> {
    render() {
        return (
            <TouchableOpacity style={styles.container}
                onPress={this.props.onPress}>

                <CustomAnimation animationStyle={'spring'} junpTime={3000}
                                 imageAddress={this.props.icon} resizeMode='contain' style={styles.icon}/>
                <Heading3>
                    {this.props.title}
                </Heading3>
            </TouchableOpacity>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        width: Dimensions.get('window').width / 4,
        height: Dimensions.get('window').width / 4,
    },
    icon: {
        width: Dimensions.get('window').width / 7,
        height: Dimensions.get('window').width / 7,
        margin: 5,
    }
});


export default HomeMenuItem;
